<template>
    <div @click.stop="handleClick" class="red">
        <span>{{ num }}</span>
    </div>
</template>

<script>
export default {
    name: "red",

    props: {
        redNum: {
            type: Number,
            default: 0
        },
        type: {
            type: String,
            default: 'red'
        },
    },
    data() {
        return {
            num: 0,
            count:0
        }
    },
    methods: {
        handleClick() {
            this.num++;
            this.count++;
            if (this.count === 2) {
                this.$emit('clickRed')
                this.count=0
            }
        }
    },
    watch: { 
        redNum(oldV, newV) {
            if (this.type === 'blue') {
                this.num += 4
            } else {
                this.num += 2
            }
            
        }
    }
}
</script>

<style scoped></style>